<!-- 电子签名 -->
<template>
  <div class="elesigncode-content">
    <div class="hello">
      <vue-ele-sign ref="elesigncode" direction="direction" :pen="pen" :bgImg="bgImg" :imgType="imgType"
        :readOnly="readOnly" :vsConsole="true" class="sign" />
    </div>

    <div class="btn-box">
      <button @click="setPen">切换画笔</button>
      <button @click="onClear">清空</button>
      <button @click="onClearSign">清空签名</button>
      <button @click="setBgImg">设置背景图片</button>
      <button @click="getImg">获取图片</button>
      <button @click="getFile">获取文件</button>
      <button @click="onIsEmpty">是否有签名</button>
      <button @click="getData">获取数据</button>
    </div>
  </div>
</template>

<script>

import VueEleSign from "vue-ele-sign";
export default {
  components: {
    VueEleSign,
  },
  data () {
    return {
      show: true,
      pen: "writing",
      imgType: "png",
      readOnly: false,
      direction: "left", //left :向左横屏
      imgUrl: "",
      bgImg: "",
    };
  },
  methods: {
    setPen () {
      this.pen = this.pen == "default" ? "writing" : "default";
    },
    onClear () {
      this.$refs.elesigncode.clear();
    },
    onClearSign () {
      this.$refs.elesigncode.clearSign();
    },
    setBgImg () {
      this.$refs.elesigncode.setBgImg(this.bgImg);
    },
    getImg () {
      this.$refs.elesigncode.getImg().then((res) => {
        console.log("图片地址1", res);
        this.bgImg = res;
      });
    },
    getFile () {
      this.$refs.elesigncode.getFile().then((res) => {
        console.log("文件1", res);
      });
    },
    getData () {
      console.log(this.$refs.elesigncode.getJson());
      return this.$refs.elesigncode.getJson();
    },
    onIsEmpty () {
      let isEmpty = this.$refs.elesigncode.isEmpty();
      console.log("isEmpty--", isEmpty);
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.elesigncode-content {
  margin: 30px;
  width: 100%;
  height: 100%;
}

.hello {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 300px;
  border: 1px solid #e6eaee;
}

.sign {
  width: 95%;
  height: 100%;
}
</style>